*{margin:0;padding:0;border:0;-webkit-box-sizing: border-box;box-sizing: border-box;}
html,body{
    width:100%;
    height: 100%;
    background:#000;
}
a{
    text-decoration: none;
}
ul,li{
    list-style-type: none;
}

#app{
    width:100%;
    min-height: 100%;
    background:url(../images/bg.png) no-repeat center top;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
  }
  .bg{
    position: absolute;
    width:1920px;
    left:50%;
    margin-left:-960px;
    top:0;
    z-index: 1;
  }
  .bg img{
    width:100%;
    vertical-align: top;
  }
  .contentMain{
    position: relative;
    z-index: 2;
    width:100%;
    height: 100%;
  }
  .top{
    height: 290px;
    background:url(../images/top_bg.png) no-repeat center top;
    text-align: center;
    color: #B79E75;
    font-size: 14px;
  line-height: 18px;
  }
  .wrap{
    width:1200px;
    margin:0 auto;
    clear: both;
    position: relative;
    max-width: 100%;
  }
  .top div{
    margin-bottom:10px;
  }
  .top .logo{
    padding-top:21px;
  }
  .top .text{
    width:270px;
    margin-left:auto;
    margin-right:auto;
  }
  .top .line{
    border-top:1px solid #B79E74;
    border-bottom: 1px solid #B79E74;
    height: 31px;
    line-height: 31px;
    width:182px;
    margin-left:auto;
    margin-right:auto;
  }
  .top .menu{
    width:36px;
    height: 36px;
    position: absolute;
    right:10px;
    top:10px;
  }
  .top .menu i{
    display: block;
    width:100%;
    height: 100%;
    position: relative;
    background:url(../images/menu.png) no-repeat center center;
    cursor: pointer;
  }
  .top .menu .menuMore{
    width:120px;
    height: auto;
    position: absolute;
    right: 0;
    top:36px;
    background: rgba(30, 27, 30, 0.68);
  border: 1px solid #BFA184;
  border-radius: 3px;
  }
  .top .menu .menuMore li{
    height: 36px;
    line-height: 36px;
    padding-left:16px;
    text-align: left;
    cursor: pointer;
  }
  .top .menu .menuMore li.active,.top .menu .menuMore li:hover,.top .menu .menuMore li:active{
    background:#a5886c;
    color:rgb(30, 27, 30);
  }
  .top .menu .menuMore li i{
    width:16px;height: 16px;
    display: inline-block;
    vertical-align: top;
    margin-right:8px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    margin-top:10px;
  }
  .top .menu .menuMore li i.cn{
    background-image: url(../images/cn.png);
  }
  .top .menu .menuMore li i.en{
    background-image: url(../images/en.png);
  }
  .chartBox{
    overflow: hidden;
  }
  .chartBox .wrap{
    width:918px;
  }
  .chartBox .per{
    width:25%;
    float: left;
    padding:0 24px;
  }
  .chartBox .per .box{
    height: 80px;
    background: linear-gradient(180deg, #2D2928 21.51%, rgba(17, 16, 23, 0) 120.35%);
  border-radius: 10px;
  padding-left:7px;
  position: relative;
  border:0;
  }
  .chartBox .per h4{
  font-size: 16px;
  line-height: 21px;
  padding-top:12px;
  font-weight: normal;
  }
  .chartBox .per p{
  font-size: 12px;
  line-height: 16px;
  padding-top:4px;
  }
  .chartBox .per:nth-child(1){
    color: #E390A9;
  }
  .chartBox .per:nth-child(2){
    color: #AC8BFF;
  }
  .chartBox .per:nth-child(3){
    color: #BC9F6A;
  }
  .chartBox .per:nth-child(4){
    color: #4FC1FF;
  }
  .chartBox .per .chart{
    position: absolute;
    width:64px;
    height: 64px;
    right:13px;
    top:50%;
    margin-top:-32px;
  }
  .chartBox .per .chart div{
    width:100%;
    height: 100%;
  }
  .infoBox{
  margin-top:24px;
  padding-bottom:15px;
  }
  .infoBox .wrap{
    width:730px;
    color: #B79E74;
  font-size: 12px;
  line-height: 16px;
  padding:10px;
  background: rgba(30, 27, 30, 0.68);
  border: 1px solid #BFA184;
  border-radius: 3px;
  text-indent: 2em;
  }
  .infoBox .wrap:after{
    content:'';
    display: block;
    width:30px;
    height: 15px;
    bottom:-14px;
    left:50%;
    position: absolute;
    background:url(../images/arrow.png) no-repeat center center;
    z-index: 2;
    margin-left:-15px;
  }
  
  .tit_join{
    text-align: center;
    margin-top:15px;
    padding-bottom: 40px;
  }
  
  .mainBox{
  
  }
  .mainBox .wrap{
    width:1200px;
    overflow: hidden;
  }
  .mainBox .per{
    width:50%;
    padding:0 10px;
    float: left;
  }
  .per .box{
    background: rgba(30, 27, 30, 0.68);
  border: 1px solid #BFA184;
  border-radius: 3px;
  height: 190px;
  font-size: 12px;
  line-height: 16px;
  color: #948D81;
  position: relative;
  }
  .per .box:before{
    content:'';
    display: block;
    width:100%;
    height: 40px;
    background: linear-gradient(180deg, rgba(86, 79, 65, 0.8) 6.97%, rgba(40, 38, 34, 0) 100%);
    position: absolute;
    left:0;
    top:0;
  }
  .per .box h2{
    font-size: 14px;
    line-height: 40px;
    color: #BCA680;
    height: 40px;
    padding:0 16px;
    position: relative;
    z-index: 2;
  }
  .mainBox .per .box .iconBox{
    position: absolute;
    right:14px;
    top:11px;
    width:103px;
  }
  /*09-14修改start*/
  .mainBox .per .box .iconBox .ico-level1{
    width:100%;
    height: 103px;
    background:url(../images/ico-level1.png) no-repeat center center;
  }
  .mainBox .per .box .iconBox .ico-level2{
    width:100%;
    height: 103px;
    background:url(../images/ico-level2.png) no-repeat center center;
  }
  .mainBox .per .box .iconBox .ico-level3{
    width:100%;
    height: 103px;
    background:url(../images/ico-level3.png) no-repeat center center;
  }
  .mainBox .per .box .iconBox .ico-vip1{
    width:100%;
    height: 20px;
    background:url(../images/ico-vip1.png) no-repeat center center;
  }
  .mainBox .per .box .iconBox .ico-vip2{
    width:100%;
    height: 20px;
    background:url(../images/ico-vip2.png) no-repeat center center;
  }
  .mainBox .per .box .iconBox .ico-vip3{
    width:100%;
    height: 20px;
    background:url(../images/ico-vip3.png) no-repeat center center;
  }
  /*09-14修改end*/
  .mainBox .per .box .text,.mainBox .per .box .count{
    padding:0 126px 0 16px;
    line-height: 28px;
    color: #948D81;
    overflow: hidden;
    margin-left:-30px;
  }
  .mainBox .per .box .text p,.mainBox .per .box .count p{
    width:50%;
    float: left;
    position: relative;
    padding-left:30px;
    height: 32px;
    overflow: hidden;
  }
  .mainBox .per .box .text p b,.mainBox .per .box .count p b{
    display: inline-block;
    margin-right: 5px;
    font-size: 20px;
  }
  .mainBox .per .box .text p .lab,.mainBox .per .box .count p .lab{
    position: absolute;
    right:0;
    top:0;
  }
  .mainBox .per .box .text input{
    width: 115px;
    height: 32px;
    background: #EEE8E8;
    border-radius: 3px;
    margin-left:8px;
    line-height: 32px;
    border:0;
    padding:0 8px;
    color:#333;
    outline: none;
  }
  .mainBox .per .box .count p{
    color: #BCA680;
    font-weight: bold;
  }
  .mainBox .per .box .count{
    margin-top:6px;
  }
  .mainBox .per .box .settlement{
      padding-left: 16px;
  }
  .mainBox .per .box a,.mainBox .per .box button{
    width: 78px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #C6A984;
  border-radius: 5px;
  display: inline-block;
  color: #C6A984;
  background:none;
  }
  .mainBox .per .box a:hover,.mainBox .per .box a:active,.mainBox .per .box button:active{
    background:#C6A984;
    color: #fff;
  }
  .mainBox .per .box.inviteBox .text{
    padding-right: 60px;
  }
  .mainBox .per .box.inviteBox .text p{
    width:100%;
    margin-bottom: 10px;
  }
  .mainBox .per .box.inviteBox .text input{
    margin-left:44px;
    width:325px;
  }
  .mainBox .per .box.inviteBox a{
    width:50px;
  }
  .mainBox .per .btnBox{
    text-align: right;
    padding:18px;
    
  }
  .mainBox .per .btnBox a{
    background: linear-gradient(0deg, #B69771 0%, #F0D7B7 100%);
  border-radius: 3px;
  width: 150px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #6A4841;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  }
  .mainBox .per .btnBox a:hover,.mainBox .per .btnBox a:active{
    background: linear-gradient(360deg, #F0D7B7 -34.21%, #B69771 81.58%);
  }
  .mainBox .per:last-child .btnBox{
    text-align: left;
  }
  
  
  .transductive{
    overflow: hidden;
  }
  .transductive .per{
    width:50%;
    padding:0 10px;
    float: left;
  }
  .transductive .per .box{
    height: 230px;
  }
  .transductive .per .box h2{
    font-size: 18px;
    height: auto;
    padding-top:10px;
  }
  .transductive .per .box h2 span{
    float: right;
    font-size: 16px;
    font-weight: normal;
  }
  .transductive .per .box h2 span b{
    font-size: 20px;
    padding:0 10px;
  }
  .transductive .per .box h3{
        font-size: 14px;
      line-height: 30px;
      color: #BCA680;
      padding: 0 26px;
      position: relative;
      z-index: 2;
  }
  .transductive .per .box.singleDay ul{
  overflow: hidden;
  padding-right: 26px;
  height: 104px;
  }
  .transductive .per .box.singleDay li{
    width:50%;
    float: left;
    padding-left:26px;
    color: #948D81;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    overflow: hidden;
    word-break: break-all;
  }
  .transductive .per .box.singleDay .fot{
    width: 100%;
    color: #948D81;
    line-height: 16px;
    padding-left:52%;
    position: absolute;
    left:0;
    bottom:17px;
  }
  .transductive .per .box.yesterdayBox ul{
  height:114px;
  padding-right: 12px;
  }
  .transductive .per .box.yesterdayBox li{
    width:50%;
    float: left;
    padding-left:26px;
    color: #948D81;
    height: 38px;
    line-height: 19px;
    font-size: 14px;
    overflow: hidden;
    word-break: break-all;
    position: relative;
    margin:4px 0;
  }
  .transductive .per .box.yesterdayBox li p.imp{
    font-size: 18px;
  }
  .transductive .per .box.yesterdayBox li .r{
    position: absolute;
    right: 0;
    top:0;
  }
  .rankResult{
    overflow: hidden;
    margin-top:22px;
  }
  .rankResult .per{
        width: 25%;
      padding: 0 10px;
      float: left;
  }
  .rankResult .per .box{
    height: 380px;
  }
  .rankResult .per .box h2 {
      font-size: 18px;
      height: auto;
      padding-top: 10px;
  }
  .rankResult .per .box h3 {
      font-size: 14px;
      line-height: 30px;
      color: #BCA680;
      padding: 0 26px;
      position: relative;
      z-index: 2;
  }
  .rankResult .per .box ul{
    padding:0 18px;
    height: 290px;
    overflow: hidden;
  }
  .rankResult .per .box li{
    height: 29px;
    line-height: 29px;
    overflow: hidden;
    font-size: 12px;
    color: #948D81;
    word-break: break-all;
  }
  .rankResult .per .box li .time{
    float: right;
    margin-left:10px;
  }
  .rankResult .per .box.lotteryBox li,.rankResult .per .box.prosperousRank li{
    height: 40px;
    line-height: 20px;
    padding-right: 74px;
    position: relative;
    margin:4px 0;
    font-size: 16px;
    width:100%;
    float: left;
  }
  .rankResult .per .box.lotteryBox li p,.rankResult .per .box.prosperousRank li p{
    width:74px;
    position: absolute;
    right: 0;
    top:0;
    text-align: right;
    font-size:12px;
  }
  .rankResult .per .box.lotteryBox li p b,.rankResult .per .box.prosperousRank li p b{
    font-size: 18px;
    font-weight: normal;
    margin-right: 5px;
  }
  .rankResult .per .box.lotteryBox li p em,.rankResult .per .box.prosperousRank li p em{
    font-style: normal;
    display: block;
    font-style: 12px;
  }
  .rankResult .per .box.prosperousRank li .txt{
    height: 20px;
    overflow: hidden;
    word-break: break-all;
    font-size:16px
  }
  .rankResult .per .box.prosperousRank li h4{
    font-weight: normal;
    font-size: 12px;
  }
  .rankResult .per .box.prosperousRank ul{
  height:240px;
  }
  .rankResult .per .box.prosperousRank{
    position: relative;
  }
  .rankResult .per .box.prosperousRank .fot{
  background: #424242;
  width:100%;
  bottom:0;
  left:0;
  height: 74px;
  z-index: 2;
  border-top:1px solid #C6A984;
  color: #948D81;
  font-size: 12px;
  line-height: 20px;
  padding:17px 10px;
  position: absolute;
  }
  .rankResult .per .box.prosperousRank .fot em{
    font-style: normal;
    font-size: 12px;
  }
  .rankResult .per .box.prosperousRank .fot span{overflow:hidden;
  height:100%;display: inline-block;vertical-align: top;
  word-break: break-all;}
  .rankResult .per .box.prosperousRank .fot .wid1{
    width:40%;
  }
  .rankResult .per .box.prosperousRank .fot .wid2{
    width:20%;
  }
  .rankResult .per .box.prosperousRank .fot .wid3{
    width:40%;
    text-align: right;
  }
  .rankResult .per .box.prosperousRank .fot h5{
    color: #BCA680;
    font-size: 0;
  }
  .rankResult .per .box.prosperousRank .fot span{
    font-size: 16px;
  }
  .rankResult .per .box.prosperousRank .fot p{
    font-size: 0;
  }
  .chartBox .per:nth-child(1) .box{
  color: #E390A9;
  }
  .chartBox .per:nth-child(2) .box{
  color: #AC8BFF;
  }
  .chartBox .per:nth-child(3) .box{
  color: #BC9F6A;
  }
  .chartBox .per:nth-child(4) .box{
  color: #4FC1FF;
  }
  .tabTit{
    display: none;
  }
  i.ico{
    display: inline-block;
    vertical-align: middle;
    width:30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  i.ico.ico-v1{
    background-image: url(../images/v1.png);
  }
  i.ico.ico-v2{
    background-image: url(../images/v2.png);
  }
  i.ico.ico-v3{
    background-image: url(../images/v3.png);
  }
  .pc .transductive .per{
    display: block!important;
  }
  .pc .rankResult .per{
    display: block!important;
  }
  .rankResult .per .box.prosperousRank .fot p span{
      font-size:12px;
  }
  @media screen and (max-width: 1200px) {
    .mainBox .per .box .text p, .mainBox .per .box .count p{
      width:100%;
    }
    .mainBox .per .box{
      height: 264px;
    }
    .mainBox .per .box.inviteBox .text input{
      width:60%;
    }
    .mainBox .per .box .settlement{
      width:103px;
      position: absolute;
          right: 14px;
          top:170px;
          padding:0;
          text-align: center;
    }
    .transRankAll{
      overflow: hidden;
    }
    .transRankAll>div{
      width:50%;
      float: left;
      padding: 0 16px;
      margin:0;
      
    }
    .transRankAll>div .wrap{
      background: rgba(30, 27, 30, 0.68);
      border: 1px solid #BFA184;
      border-radius: 3px;
      overflow: hidden;
      height: 380px;
    }
    .transRankAll>div .wrap:before{
  content:'';
    display: block;
    width:100%;
    height: 40px;
    background: linear-gradient(180deg, rgba(86, 79, 65, 0.8) 6.97%, rgba(40, 38, 34, 0) 100%);
    position: absolute;
    left:0;
    top:0;
    }
    .transRankAll>div .box{
      background:none;
      border:0;
    }
    .transRankAll>div .box:before{
      display: none;
    }
    .transRankAll>div .per{
      width:100%;
    }
    .transductive .per .box h2{
      display: none;
    }
    .tabTit{
      display: block;
      text-align: center;
      position: relative;
      z-index: 2;
      padding:10px 0;
    }
    .tabTit>div{
      display: inline-block;
      vertical-align: top;
      font-size:0;
      border:1px solid #C6A984;
      height: 32px;
      line-height: 30px;
      border-radius: 8px;
      overflow: hidden;
    }
    .tabTit>div span{
      display: inline-block;
      vertical-align: top;
      height: 100%;
      padding:0 8px;
      font-size: 12px;
      color: #C6A984;
      border-right:1px solid #C6A984;
      cursor: pointer;
    }
    .tabTit>div span:last-child{
      border:0;
    }
    .tabTit>div span.active{
      background:#C6A984;
      color:#fff;
    }
    .transductive .per .box h3{
      padding:0;
    }
    .transductive .per .box.singleDay ul{
      padding:0;
    }
    .transductive .per .box.singleDay li{
      width:100%;
      padding:0;
    }
    .transductive .per .box.singleDay .fot{
      padding:0;
    }
    .transductive .per .box.yesterdayBox li{
      padding:0;
      width:100%;
    }
    .transductive .per .box.yesterdayBox h2{
      display: block;
    }
    .transductive .per .box.yesterdayBox h2 font{
      display: none;
    }
    .transductive .per .box.yesterdayBox h2 span{
      float: none;
      display: block;
      text-align: center;
      font-size: 16px;
    }
    .transductive .per .box h2 span b{
      font-size:24px;
      font-weight: normal;
    }
    .transductive .per .box{
      height: auto;
    }
    .transductive .per .box.yesterdayBox ul{
      height: 230px;
      overflow: hidden;
    }
    .rankResult .per .box h2{
      display: none;
    }
    .transRankAll>div .per{
      padding:0 16px;
    }
    .rankResult .per .box h3{
      padding:0;
      color: #C2BFBA;
      font-weight: normal;
    }
    .rankResult .per .box.overflowResults h3{
      display: none;
    }
    .rankResult .per .box.overflowResults ul{
      height: 319px;
    }
    .rankResult .per .box.lotteryBox h3{
      display: none;
    }
    .transRankAll>div .wrap{
      position: relative;
    }
    .rankResult .per .box.prosperousRank{
          position: initial;
    }
    .transductive .per .box{
      position: initial;
    }
    .transductive .per .box.singleDay .fot{
      padding:0 16px;
    }
  }
  @media screen and (max-width: 768px) {
    .chartBox .per{width:50%;}
    .infoBox{
      padding:0 20px;
    }
    .mainBox .per{
      width:100%;
    }
    .mainBox .per .btnBox{
      text-align: center;
    }
    .mainBox .per:last-child .btnBox{
      text-align: center;
    }
    .transRankAll>div{
      width:100%;
      margin-bottom: 18px;
    }
    #app{
      padding-bottom:0;
    }
    .mainBox .per:nth-child(1){
      margin-bottom: 18px;
    }
    .mainBox .per:nth-child(3),.mainBox .per:nth-child(4){
      width:50%;
    }
  }